<script setup lang="ts">
import {computed, reactive, ref} from "vue";

interface ListObjType {
  id: number;
  title: string;
  isChoose: boolean
}

let list = reactive<ListObjType[]>([{id: 0, title: '吃饭', isChoose: false}, {id: 1, title: '睡觉', isChoose: false}])

// 选中状态改变
function changeChecked(item: ListObjType) {
  // console.log('点击')
  item.isChoose = !item.isChoose
}

// 删除
function del(i: number) {
  // console.log(i)
  list.splice(i, 1)
}

let inputValue = ref<string>('')

// 添加
function add() {
  console.log(inputValue.value)
  list.push({
    id: list[list.length - 1]?.id + 1 || 0,
    title: inputValue.value,
    isChoose: false
  })
  inputValue.value = ''
}

// 完成的个数
let completeNum = computed(() => {
  return list.filter(item => item.isChoose).length
})
</script>

<template>
  <div>共有{{ list.length }}条数据，其中{{ completeNum }}条已完成</div>
  <input type="text" v-model="inputValue">
  <button @click="add">添加</button>
  <ul>
    <li v-for="(item,index) in list" :key="item.id">
      <input type="checkbox" :checked="item.isChoose" @change="changeChecked(item)">
      <span :class="item.isChoose?'del':''">{{ item.title }}</span>
      <button @click="del(index)">删除</button>
    </li>
    <!--    <li>-->
    <!--      <input type="checkbox"><span>睡觉</span>-->
    <!--      <button>删除</button>-->
    <!--    </li>-->
  </ul>
</template>

<style scoped>
ul {
  list-style: none;

  .del {
    text-decoration: line-through;
  }
}
</style>
